<template>
  <div>
    <div>
      <el-input
        v-model="input"
        placeholder="请输入订单号"
        style="width: 300px"
      ></el-input
      ><el-button type="primary" @click="lookorders">所搜商品</el-button>
    </div>
    <el-table :data="ordersList" style="width: 100%">
      <el-table-column prop="order_id" label="订单ID" sortable></el-table-column>
      <el-table-column prop="order_number" label="订单编号"> </el-table-column>
      <el-table-column prop="order_price" label="订单价格" sortable> </el-table-column>
      <el-table-column prop="is_send" label="是否付款"> </el-table-column>
      <el-table-column prop="is_send" label="是否发货"> </el-table-column>
      <el-table-column prop="create_time" label="下单时间"> </el-table-column>
      <el-table-column prop="order_fapiao_title" label="发货人/公司">
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button
              type="primary"
              icon="el-icon-edit"
              round
              @click="EditOrders(scope.row)"
            ></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[20, 30, 50, 99]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 所搜弹框 -->
    <el-dialog title="商品详情" :visible.sync="dialogLookOrders">
      <el-form :model="looksorder">
        <el-form-item label="订单ID">
          <el-input v-model="looksorder.order_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="looksorder.order_number" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单价格">
          <el-input v-model="looksorder.order_price" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否付款">
          <el-input v-model="looksorder.is_send" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否发货">
          <el-input v-model="looksorder.is_send" disabled></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-input v-model="looksorder.create_time" disabled></el-input>
        </el-form-item>
        <el-form-item label="发货人/公司">
          <el-input v-model="looksorder.order_fapiao_title" disabled></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input
            v-model="looksorder.order_fapiao_company"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="发票内容">
          <el-input
            v-model="looksorder.order_fapiao_content"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="发货地址">
          <el-input v-model="looksorder.consignee_addr" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogLookOrders = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog title="商品详情" :visible.sync="dialogEditOrders">
      <el-form :model="Editorder">
        <el-form-item label="订单ID">
          <el-input v-model="Editorder.order_id"></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="Editorder.order_number"></el-input>
        </el-form-item>
        <el-form-item label="订单价格">
          <el-input v-model="Editorder.order_price"></el-input>
        </el-form-item>
        <el-form-item label="是否付款">
          <el-input v-model="Editorder.is_send" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否发货" >
          <el-input v-model="Editorder.is_send" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogEditOrders = false"
          >取消</el-button
        >
        <el-button type="primary" @click="EditsOrders">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ordersList: [], //所有订单
      //搜索
      dialogLookOrders: false,
      input: "", //搜索输入框
      looksorder: {}, //根据查询id找到的值
      //编辑
      Editorder: {},
      dialogEditOrders: false,
      //分页
      total: 0, //表示有多少条数据
    };
  },
  methods: {
    //编辑 -- 弹窗
    EditOrders(userinfo) {
      this.Editorder = userinfo;
      console.log(this.Editorder);
      this.dialogEditOrders = true;
    },
    //编辑
    async EditsOrders() {
      var { data } = await this.$req.put(
        "/orders/" + this.Editorder.order_id,
        this.Editorder
      );
      if (data.meta.status == 201) {
        this.$message({
          showClose: true,
          message: "恭喜你，修改订单成功",
          type: "success",
        });
        
        this.dialogEditOrders = false;
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //搜索
    async lookorders() {
      // console.log();
      this.dialogLookOrders = true;
      var { data } = await this.$req.get("/orders/" + this.input);
      this.looksorder = data.data;
    },
    //分页
    //表示每一页有多少条数据
    handleSizeChange(pagesize) {
      this.getcreated(1, pagesize);
    },
    //表示页数
    handleCurrentChange(pagenum) {
      this.getcreated(pagenum, 20);
    },
    //渲染封装
    async getcreated(pagenum = 1, pagesize = 10) {
      var { data } = await this.$req.get(
        `/orders?pagenum=${pagenum}&pagesize=${pagesize}`
      );
      this.ordersList = data.data.goods;
      this.total = data.data.total;
    },
  },
  async created() {
    this.getcreated(1, 20);
  },
};
</script>

<style>
</style>